<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        {{message}}
        <span v-model="message">{{message}}</span>
        <br>
        <div><br></div>
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>

            <tr align="center" v-for="(user, index) in users">
                <td>{{index+1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td>
                    <span v-if="user.gender==1">男</span>
                    <span v-if="user.gender==2">女</span>
                </td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score>85" style="color:green">优秀</span>
                    <span v-else-if="user.score>60">及格</span>
                    <span v-else style="color: red">不及格</span>
                </td>
            </tr>
        </table>
        <div><br></div>
        <input type="button" value="获取数据get" v-on="get()">
        <input type="button" value="删除数据post" v-on="post()">
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        methods: {
            get: function (){
                axios({
                    method: "get",
                    url: "?",
                }).then(result => {
                    console.log(result.data)
                })
            }
            post: function (){
                axios({
                    method: "post",
                    url: "?",
                    data: "id=1"
                }).then(result => {
                    console.log(result.data)
                })
            }
        },
        data:{
            message: "你好",
            users:[{
                name: "Tom",
                age: 20,
                gender:1,
                score: 78
            },{
                name: "Jack",
                age: 20,
                gender:1,
                score: 86
            },{
                name: "robit",
                age: 20,
                gender:1,
                score: 90
            },{
                name: "lisi",
                age: 20,
                gender:2,
                score: 52
            },{
                name: "jenry",
                age: 20,
                gender:2,
                score: 77
            }]
        }
    })
</script>
</html>